import React, { Component } from 'react';
import { Grid } from '@icedesign/base';
import IceContainer from '@icedesign/container';
import ContainerTitle from './components/ContainerTitle';
import ContractTable from './components/ContractTable';
import SearchFilter from './components/SearchFilter';
import SearchHistory from './components/SearchHistory';
import Api from '../../Api/Api';
import Ajax from '../../Ajax';

const { Row, Col } = Grid;

const mockData = () => {
  return Array.from({ length: 10 }).map((item, index) => {
    return {
      id: `00000${index}`,
      name: `商品${index}`,
      category: '服装',
      introduce: '上海xxx科技有限公司',
      price: '999,999',
      size: '标准',
    };
  });
};

export default class SeeGoodComment extends Component {
  static displayName = 'SeeGoodComment';

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {
      dataSource: [],
      isLoading: false,
      total: 0,
      value: {}
    };
  }

  componentDidMount() {
    // this.fetchData({}, 1);
  }

  fetchData = (value, pageNumber) => {
    var url = Api.getGoodComment(value, pageNumber);
    // console.log(url);
    this.setState({
      isLoading: true,
      value
    });
    // console.log(url);
    Ajax.get(url)
      .then((res) => {
        // console.log(res.data)
        if (res.data.code) {
          this.setState({
            isLoading: false,
            dataSource: res.data.data,
            total: res.data.total
          })
        } else {
          this.setState({
            isLoading: false,
            dataSource: [],
            total: res.data.total
          })
        }
      })
  };

  // 修改商品后调用
  changeData = (value) => {
    // console.log(value);
    var newDataSource = [];
    this.state.dataSource.forEach((val) => {
      if (value['_id'] !== val['_id']) {
        newDataSource.push(val);
      } else {
        newDataSource.push(value);
      }
    });
    // console.log(newDataSource)
    this.setState({
      dataSource: newDataSource
    })
  }

  // 删除商品后调用
  deleteData = (value, pageNumber) => {
    // console.log(pageNumber)
    this.fetchData(value, pageNumber);
    // console.log()
  }

  render() {
    const { isLoading, dataSource, total, value, changeData, deleteData } = this.state;
    return (
      <Row gutter={20} wrap>
        <Col l="18">
          <IceContainer style={{ padding: '0' }}>
            <ContainerTitle title="查看商品评论" />
            <div style={{ padding: '20px' }}>
              <SearchFilter fetchData={this.fetchData} />
              <ContractTable
                isLoading={isLoading}
                dataSource={dataSource}
                fetchData={this.fetchData}
                total={total}
                value={value}
                changeData={this.changeData}
                deleteData={this.deleteData}
              />
            </div>
          </IceContainer>
        </Col>
        <Col l="6">
          <SearchHistory fetchData={this.fetchData} />
        </Col>
      </Row>
    );
  }
}
